---
id: 5dc174fcf86c76b9248c6eb2
title: 步驟 1
challengeType: 0
dashedName: step-1
---

# --description--

HTML elements have an opening and closing tag with content in between.

Here is the basic syntax:

```html
<openingTag>content</closingTag>
```

The first element you will learn about is the `h1` element. The `h1` element is a heading element and is used for the main heading of a webpage.

```html
<h1>This is a main heading</h1>
```

將下面 `h1` 元素的文本從 `Hello World` 更改爲 `CatPhotoApp`，並觀察瀏覽器預覽中的變化。

完成後，按“檢查你的代碼”按鈕查看代碼是否正確。

# --hints--

代碼中應包含文本 `CatPhotoApp`。 你可能想要檢查你的拼寫。

```js
assert(code.match(/catphotoapp/i));
```

你的 `h1` 元素應該有一個開始標籤。 開始標籤的書寫語法爲：`<elementName>`。

```js
assert(document.querySelector('h1'));
```

你的 `h1` 元素應該有一個結束標籤。 結束標籤在 `<` 字符後面要有一個 `/`。

```js
assert(code.match(/<\/h1\>/));
```

你有不止一個 `h1` 元素。 刪除多餘的 `h1` 元素。

```js
assert(document.querySelectorAll('h1').length === 1);
```

你的 `h1` 元素的文本應爲 `CatPhotoApp`。 你可能忽略了此文本，或者有拼寫錯誤，或沒有把它放在 `h1` 元素的開始和結束標籤之間。

```js
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
```

你似乎使用了一個瀏覽器擴展，正在修改頁面。 一定要關閉所有瀏覽器擴展。

```js
assert.isAtMost(document.querySelectorAll('script').length, 2);
assert.equal(document.querySelectorAll('style').length, 0);
assert.equal(document.querySelectorAll('link').length, 0);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
--fcc-editable-region--
    <h1>Hello World</h1>
--fcc-editable-region--
  </body>
</html>
```

